<template>
	<view>
		<view class="search-top">
			<view class="search-city" @click="chooseCity">
				<text class="icon iconfont iconweizhi" style="color: #3277FA;"></text>
				{{current_city_name|formatCityName}}
			</view>
			<view @click="toSearch" class="search-contain">
				<view class="icon iconfont iconguanjiaowangtubiao22"></view>
				<view class="search-placeholder">请输入您想要了解的内容</view>
			</view>
		</view>
		<view class="top-banner">
			<image class="top-banner-img" src="https://www.innovationgloble.com/wxs/img/wx/wx_banner_01.png"></image>
			<view class="banner_name">
				· {{current_city_name|clearCitySuffix}}站 ·
			</view>
		</view>
		<view class="quick-enter">
			<view @click="toProjectList" class="quick-enter-item">
				<view class="quick-enter-item-icon selfbg1">
					<image style="width: 90upx;height: 90upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/quick-index-pro.jpg"
					 mode="scaleToFill"></image>
				</view>
				<view class="quick-enter-item-title">
					项目技术
				</view>
			</view>
			<view @click="toExpertList" class="quick-enter-item">
				<view class="quick-enter-item-icon selfbg2">
					<image style="width: 90upx;height: 90upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/quick-home-expert.jpg"
					 mode=""></image>
				</view>
				<view class="quick-enter-item-title">
					专家
				</view>
			</view>
			<view class="quick-enter-item" @click="goAct">
				<view class="quick-enter-item-icon selfbg3">
					<image style="width: 90upx;height: 90upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/quick-home-act.jpg" mode=""></image>
				</view>
				<view class="quick-enter-item-title">
					活动
				</view>
			</view>
		</view>
		<!-- 通知 -->
		<view class="notice">
			<view class="notice-title">
				<text class="notice-title-t1">平台</text>
				<text class="notice-title-t2">公告</text>
			</view>
			<view class="vertical-bar"></view>
			<swiper class="notice-contain" autoplay="false" circular="true" vertical="true" interval="3000" duration="200">
				<block v-for="(item,index) in msgList" :key="index">
					<swiper-item class="notice-item-contain">
						<view class="swiper-item">{{item.desc}}
							<text style="color:#FF6B00">{{item.count}}</text>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 优选推荐 -->
		<view class="cate-title">
			优选推荐
		</view>
		<view class="swiper-commend">
			<swiper @change="recommendSwiperClick" class="swipe-contain" :indicator-dots="false" circular="true" :autoplay="true"
			 :interval="3000" :duration="200">
				<block v-for="(item ,index) in recommendList" :key="index">
					<swiper-item>
						<view @click="toProjectDetail(item)" class="swipe-contain-item">
							<view class="swipe-contain-item-top">
								<view>
									<image class="swipe-contain-item-pic" :src="item.photos[0]" mode=""></image>
								</view>
								<view class="swipe-contain-item-contain">
									<view class="swipe-contain-item-contain-title oneline">{{item.projectName}}</view>
									<view class="swipe-contain-item-contain-text">{{processTypeStr(item)}}</view>
									<view class="swipe-contain-item-contain-text oneline">{{wordList(item)}}</view>
									<view v-if="isLine" class="swipe-contain-item-contain-text selfcolor oneline">{{wantList(item)}}</view>
								</view>
							</view>
							<view class="swipe-contain-item-detail two-line">
								{{item.yourWantContent}}
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<view class="swiper-tip-contain">
				<block v-for="(item,index) in recommendList.length" :key="index">
					<view :class="currentRecommendswiper==index?'swiper-tip-acitive':'swiper-tip'"></view>
				</block>
			</view>
		</view>
		<!-- 项目技术 -->
		<view class="project-contain">
			<view class="project-contain-top">
				<view class="project-contain-top-title">
					项目技术
				</view>
				<view @click="toProjectList" class="project-contain-top-opt">
					<text>更多</text>
					<text class="icon iconfont iconright1"></text>
				</view>
			</view>
			<ScrollTabbar :tabIndex="projectCurrentIndex" @tabclick='proTab' :list="projectCateList"></ScrollTabbar>
		</view>
		<view class="">
			<view class="project-swiper-contain">
				<block v-for="(item,index) in projectList" :key='index'>
					<view @click="toProjectDetail(item,index)" class="project-swipe-contain-item" :class="opcityPro==index?'sysOpacity':''">
						<view class="swipe-contain-item-top">
							<view>
								<image class="swipe-contain-item-pic" :src="item.photos[0]" mode=""></image>
							</view>
							<view class="swipe-contain-item-contain">
								<view class="swipe-contain-item-contain-title oneline">{{item.projectName}}</view>
							<view class="swipe-contain-item-contain-text">{{processTypeStr(item)}}</view>
							<view class="swipe-contain-item-contain-text oneline">{{wordList(item)}}</view>
							<view v-if="isLine" class="swipe-contain-item-contain-text selfcolor oneline">{{wantList(item)}}</view>
							</view>
						</view>
						<view class="swipe-contain-item-bottom">
							<view class="swipe-contain-item-bottom-com">
								<image style="width: 30upx;height: 30upx;margin-right:13upx;vertical-align: top;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/homecompany.jpg"
								 mode=""></image>
								{{item.companyName}}
							</view>
							<view class="swipe-contain-item-bottom-seen">
								<image style="width: 20upx;height: 25upx;margin-right:21upx;vertical-align: middle;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/p-loca.jpg"
								 mode=""></image>
								{{item.provinceName}}
							</view>
						</view>
					</view>
				</block>
				
				<view v-if="projectList.length===0">
					<view class="">
						暂无数据
					</view>
				</view>
			</view>

			<view class="more-click" @click="toProjectList">
				查看更多项目
			</view>
		</view>
		<!-- 专家 -->
		<view class="project-contain">
			<view class="project-contain-top">
				<view class="project-contain-top-title">
					专家
				</view>
				<view @click="toExpertList" class="project-contain-top-opt">
					<text>更多</text>
					<text class="icon iconfont iconright1"></text>
				</view>
			</view>
		</view>
		<view class="expert-list">
			
			<ExpertItem ref='ExpertItem' :expertList="expertList" ></ExpertItem>
		</view>
		<view @click="toExpertList" class="more-click">
			查看更多专家
		</view>
		<!-- 活动 -->
		<view class="project-contain">
			<view class="project-contain-top">
				<view class="project-contain-top-title">
					活动
				</view>
				<view @click="goAct" class="project-contain-top-opt">
					<text>更多</text>
					<text class="icon iconfont iconright1"></text>
				</view>
			</view>
			<ScrollTabbar :tabIndex="activityCurrentIndex" :scrollInfo="scrollActInfo" @tabclick='activityTab' :list="activityTabList"></ScrollTabbar>
		</view>
		<view class="">
			<view class="activity-swiper-contain">
				<ActivityItem ref='Item' :activityList="activityList"></ActivityItem>
			</view>
			<view @click="goAct" class="more-click">
				浏览更多活动
			</view>
			<view class="sysBottomShow">
				我是有底线的
			</view>
		</view>

	</view>
</template>

<script>
	import ScrollTabbar from '@/components/scroll-tabbar'
	import ExpertItem from '@/components/page-componnet/expert-item.vue';
	import ActivityItem from '@/components/page-componnet/activity-item.vue'
	import {
		mapActions,
		mapMutations,
		mapState
	} from 'vuex';
	import {
		startLocate,
		saveCurrentCity
	} from '@/utils/city.js';
	export default {
		components: {
			ScrollTabbar,
			ExpertItem,
			ActivityItem,
		},
		data() {
			return {
				originProjectType: '"项目融资"',
				msgList: [{
						id: '1',
						desc: '恭喜国科创新完成产业转移,获得',
						count: '10万奖励金'
					},
					{
						id: '2',
						desc: '恭喜中科淮北产业研究院完成产业转移,获得',
						count: '20万奖励金'
					},
					{
						id: '3',
						desc: '恭喜云南智诚完成产业转移,获得',
						count: '12万奖励金'
					}
				],
				recommendList: [],
				activityList: [],
				projectList: [],
				expertList: [],
				projectCateList: [{
						name: '项目融资',
						id: '项目融资'
					},
					{
						name: '项目落地',
						id: '项目落地'
					},
					{
						name: '技术交易',
						id: '技术交易'
					},
					{
						name: '招人才',
						id: '招人才'
					}
				],
				scrollActInfo: '',
				projectCurrentIndex: 0,
				activityCurrentIndex: 0,
				activityTabList: [{
					name: '展会展览',
					id: 'zh',
					ids: '1001006'
				}, {
					name: '论坛峰会',
					id: 'lt',
					ids: '1001005'
				}, {
					name: '项目路演',
					id: 'xm',
					ids: '1001002'
				}, {
					name: '讲座培训',
					id: 'jz',
					ids: '1001003'
				}, {
					name: '专题沙龙',
					id: 'zt',
					ids: '1001004'
				}, {
					name: '企业活动',
					id: 'qy',
					ids: '1001001'
				}],
				currentRecommendswiper: 0,
				currentIndex1: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				opcityExp: -1,
				opcityAct: -1,
				opcityPro: -1,
				isLine:false,
			}
		},
		onShow(){
			this.loadIsLine();
			const permList = uni.getStorageSync('permList');
			if (permList){
				this.setPermList(permList);
			}
			if(this.show_locate){
				this.loadCityDatas(cityDatas=>{
					startLocate((cityName)=>{
						this.setCity(cityName);
						this.saveCityLocal(cityName,cityDatas);
						this.loadLoginInfo();
						this.getRecommendList();
						this.getActivityList();
						this.getExpertList();
						this.getProjectList();
					});
					this.resetLocation(false);
				});
			}
			this.activityCurrentIndex = 0;
			this.loadLoginInfo();
			this.getRecommendList();
			this.getActivityList();
			this.getExpertList();
			this.getProjectList();
		},
		filters:{
			formatCityName(value){
				if(value){
					if(value.length>4){
						return value.slice(0,4)+'...';
					}
					return value.slice(0,4);
				}
				return '';
			},
			clearCitySuffix(value){
				if(value.includes('定位中')){
					return '全国'
				}
				if(value){
					return value.replace('市','');
				}
				return '';
			}
		},
		computed:{
			...mapState('locationStore',['current_city_name','show_locate']),
			processTypeStr() {
				return projectInfo => {
					let composeStr = '';
					if (projectInfo.financingTypeStr) {
						composeStr = projectInfo.processTypeStr;
					}
					if (projectInfo.financingTypeStr) {
						composeStr += `(${projectInfo.financingTypeStr})`;
					}
					return composeStr;
				}
			},
			wordList() {
				return projectInfo => {
					if (projectInfo.words) {
						return projectInfo.words.join('｜');
					}
					return '';
				}
			},
			wantList() {
				return projectInfo => {
					if (projectInfo.yourWant) {
						return projectInfo.yourWant.join('、');
					}
					return '';
				}
			}
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo','setPermList','setIsLine']),
			...mapMutations('chatStore', ['setChatLogin']),
			...mapMutations('locationStore',['setCity','resetLocation']),
			loadIsLine(){
				//是否上线
				this.$request.get({
					url:'user/chat'
				}).then(res=>{
					console.log(res,res.indexOf('false') === -1,res.indexOf('true') === -1)
					if(res.indexOf('false') !== -1){
						this.isLine = false;
						this.setIsLine(false);
					}
					if(res.indexOf('true') !== -1){
						this.isLine = true;
						this.setIsLine(true);
					}
				})
			},
			saveCityLocal(cityName, cityDatas){
				for(let sec of cityDatas){
					const cities  = sec.cities;
					for(let city of cities){
						if(city.city_name.indexOf(cityName) !==-1){
							saveCurrentCity(city);
						}
						else if(cityName.indexOf(city.city_name)!==-1){
							saveCurrentCity(city);
						}
					}
				}
			},
			loadCityDatas(cb){
				this.$request.get({
					url: 'region/queryAllCity.json',
					data: {},
				}).then(citys => {
					let datas = citys.map(d => {
						const idx = d.letter.toUpperCase();
						const cities = d.datas.map(d => {
							return {
								"city_name": d.cityName,
								"city_pinyin": "",
								"city_id": d.cityCode,
								"py": ""
							}
						});
						return {
							idx,
							cities
						}
					});
					cb && cb(datas);
				});
			},
			chooseCity() {
				uni.navigateTo({
					url: "/pagesB/city-choose/city-choose"
				});
			},
			loadLoginInfo() {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.saveUserInfo(userInfo);
					getApp().connectWS();
				}
			},
			formatPrice(item) {
				if (item.isFee === 0) {
					return "免费"
				} else {
					let fee = item.regFee.toFixed(2)
					return '¥' + fee
				}
			},
			goAct() {
				uni.navigateTo({
					url: "/pages/activity/activity"
				})
			},
			//throttle
			throttle(fn, delay) {
				let prev = Date.now();

				return function() {
					let context = this;
					let args = arguments;
					let now = Date.now();
					if (now - prev >= delay) {
						fn.apply(context, args);
						prev = Date.now();
					}
				}

			},
			//优选推荐swiper切换
			recommendSwiperClick(event) {
				this.currentRecommendswiper = event.detail.current;
			},
			//获取优选推荐的数据
			getRecommendList() {
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: {
						pageSize: 5,
						pageIndex: 1,
					},
				}).then(res => {
					let array = res.data;
					this.recommendList = array.length > 5 ? array.slice(0, 5) : array;
				});
			},
			//获取项目技术
			getProjectList(data = "项目融资") {
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: {
						pageSize: 5,
						pageIndex: 1,
						yourWant: ['"' + data + '"']
					},
				}).then(res => {
					this.projectList = [];
					let array = res.data;
					this.projectList = array.length > 3 ? array.slice(0, 3) : array;
				});
			},
			//获取活动列表
			getActivityList(data = "1001006") {
				this.$request.get({
					url: 'innovationActivities/showByPage',
					data: {
						pageSize: 3,
						pageNum: 1,
						activitiesType: data
					},
				}).then(res => {

					let array = res.list ? res.list : [];
					this.activityList = array.length > 3 ? array.slice(0, 3) : array;
				});
			},
			//获取专家列表
			getExpertList() {
				this.$request.post({
					url: 'ExpertInfo/selectExperInfoByCondition',
					data: {
						pageSize: 3,
						pageNumber: 1,
					},
				}).then(res => {
					for(let k of res.list){
						k.research = k.research.split(',')
						
						let priceItems = k.mallInfo;
						if (priceItems && priceItems.length !== 0) {
							//获取到 图文咨询
							const picTxtItems = priceItems.filter(item => parseInt(item.typeId) === 2);
							if (picTxtItems.length !== 0) {
								if (parseFloat(picTxtItems[0].isEnable) === 1) {
									k.picTxtItem = picTxtItems[0];
								}
							}
							const phoneItems = priceItems.filter(item => parseInt(item.typeId) === 3);
							if (phoneItems.length !== 0) {
								if (parseFloat(phoneItems[0].isEnable) === 1) {
									k.phoneItem = phoneItems[0];
								}
							}
						}
					}
					let array = res.list ? res.list : [];
					this.expertList = array.length > 3 ? array.slice(0, 3) : array;
				});
			},
			activityTab(index) {
				this.activityCurrentIndex = index;
				let data = this.activityTabList[this.activityCurrentIndex].ids;
				this.scrollActInfo = this.activityTabList[this.activityCurrentIndex].id;
				this.getActivityList(data);
			},
			proTab(index) {
				this.projectCurrentIndex = index;
				let data = this.projectCateList[this.projectCurrentIndex].id;
				this.getProjectList(data)
			},
			//跳转到搜索页面
			toSearch() {
				uni.navigateTo({
					url: '/pagesA/search-page/search-page'
				});
			},
			//跳转到项目列表页
			toProjectList() {
				uni.navigateTo({
					url: '/pages/project-list/project-list'
				});
			},
			toExpertList() {
				uni.navigateTo({
					url: '/pages/expert-list/expert-list'
				});
			},
			toExpertDetail(item, index) {
				this.opcityExp = index
				uni.navigateTo({
					url: '/pages/expert-detail/expert-detail?scene=' + item.expertId
				});
			},
			toProjectDetail(item, index) {
				this.opcityPro = index
				uni.navigateTo({
					url: '/pages/project-detail/project-detail?scene=' + item.projectId
				});
			},
			toActivityDetail(item, index) {
				this.opcityAct = index
				uni.navigateTo({
					url: '/pages/activity-detail/activity-detail?scene=' + item.id
				});
			}
		},
		onHide() {
			let that = this
			setTimeout(function() {
				that.opcityAct =-1
				that.opcityExp =-1
				that.opcityPro =-1
				that.$refs.ExpertItem.resetOpcity()
			},1000)
		}
	}
</script>

<style scoped lang="less">
	.search-top {
		display: flex;
		margin-bottom: 18upx;
		margin-left: 30upx;
		margin-right: 30upx;
		align-items: center;
		margin-top: 10rpx;
	}

	.search-city {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: bold;
		color: rgba(75, 75, 75, 1);
		overflow-x: hidden;
		text-overflow: ellipsis;
		word-break: break-word;
		white-space: nowrap;
		display: flex;
		align-items: center;
	}

	.search-contain {
		display: flex;
		flex: 1;
		/* width: 540upx; */
		height: 64upx;
		line-height: 64upx;
		align-items: center;
		background: rgba(245, 245, 245, 1);
		border-radius: 32upx;
		font-size: 24px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-left: 23upx;
		padding: 13upx 0 11upx 32upx;
		color: rgba(187, 187, 187, 1);
	}

	.search-placeholder {
		margin-left: 20upx;
	}

	.expert-banner {
		width: 100%;
		height: 332upx;
	}

	.expert-swiper {
		width: 100%;
		height: 332upx;

		.first-banner {
			position: relative;

			.pos {
				position: absolute;
				right: 20upx;
				top: 20upx;
				padding: 0 10upx;
				box-sizing: border-box;
				height: 50upx;
				background: linear-gradient(258deg, rgba(251, 82, 0, 1) 0%, rgba(253, 195, 38, 1) 100%);
				display: flex;
				flex-direction: row;
				align-items: center;
				border-radius: 4upx;

				.arrow {
					height: 50upx;
					width: 9upx;
				}

				.icon {
					width: 25upx;
					height: 25upx;
					margin-bottom: 4upx;
					margin-right: 4upx;
				}

				.addr {
					color: #FFFFFF;
					line-height: 50upx;
					/* text-align: center; */
					max-width: 120upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-clamp: 1;
					font-size: 24upx;
				}
			}
		}
	}

	.swiper-item {
		width: 100%;
		height: 332upx;
	}

	.top-banner {
		position: relative;

		.top-banner-img {
			display: block;
			margin: 0 auto;
			width: 690upx;
			height: 290upx;
		}

		.banner_name {
			font-size: 26upx;
			color: #FFFFFF;
			position: absolute;
			line-height: normal;
			top: 30upx;
			right: 55upx;
		}
	}


	.quick-enter {
		display: flex;
		justify-content: space-between;
		margin: 30upx 62upx;
	}

	.quick-enter-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.quick-enter-item-icon {
		/* width: 90upx;
		height: 90upx; */
		border-radius: 50%;
		vertical-align: middle;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* .quick-enter-item-icon>.iconzhuanjia{
		margin-bottom: -10upx;
	} */

	.selfbg1 {
		/* background:linear-gradient(360deg,#F7B500 0%,#FFCD42 100%); */
		box-shadow: 0px 8upx 10upx 0px #F5A623;
	}

	.quick-enter-item-icon .icon {
		color: white;
		font-weight: 400;
		font-size: 46upx;
	}

	.selfbg2 {
		/* background:linear-gradient(360deg,rgba(222,90,2,1) 0%,rgba(255,153,85,1) 100%); */
		box-shadow: 0px 8upx 10upx 0px rgba(234, 114, 33, 0.3);
	}

	.selfbg2 .icon {
		font-size: 52upx;
	}

	.selfbg3 {
		/* background:linear-gradient(360deg,#2A7DFA 0%,#88B8FF 100%); */
		box-shadow: 0px 8upx 10upx 0px #3277FA;
	}

	.selfbg3 .icon {
		font-size: 52upx;
	}


	.quick-enter-item-title {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 9upx;
	}

	.notice {
		display: flex;
		padding: 25upx 52upx 30upx 25upx;
		align-items: center;
		border: 1px solid #F2F2F2;
	}

	.vertical-bar {
		width: 1px;
		height: 20upx;
		border-left: 1px solid #EBEBEB;
		margin-left: 14upx;
		margin-right: 14upx;
	}

	swiper.notice-contain {
		height: 50upx;
		width: 514upx;
		/* border: 1px solid #0066CC; */
	}

	swiper-item.notice-item-contain {
		height: 50upx;
		width: 100%;
	}

	.notice-item-contain>.swiper-item {
		height: 50upx;
		line-height: 50upx;
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.notice-title-t1 {
		color: #FF6B00;
		font-size: 24upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 800;
	}

	.notice-title-t2 {
		color: #222222;
		font-size: 24upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 800;
	}

	.cate-title {
		font-size: 34upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 800;
		color: rgba(34, 34, 34, 1);
		margin: 19upx 0upx 19upx 30upx;
	}

	.swiper-commend {
		// margin-left: 30upx;
	}

	.swipe-contain {
		margin: 0 auto;
		width: 700upx;
		height: 345upx;
		box-shadow: 0px 9upx 33upx 0px rgba(42, 125, 250, 0.06);

	}

	.swipe-contain-item {
		width: 671upx;
		height: 325upx;
		/* border: 1px solid #007AFF; */
		padding: 40upx 20upx 24upx 20upx;
		/* box-shadow:0px 9upx 33upx 0px rgba(42,125,250,0.06); */
		border-radius: 8upx;
	}



	.swipe-contain-item-top {
		display: flex;
		align-items: center;
	}

	.swipe-contain-item-pic {
		width: 270upx;
		height: 170upx;
		/* border: 1px solid #09BB07; */
		margin-right: 30upx;
		flex-shrink: 0;
		border-radius: 6upx;
	}

	.swipe-contain-item-contain {
		padding-bottom: 4upx;
		width: 382upx;
		/* flex:1 */
	}

	.swipe-contain-item-contain-title {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		margin-top: -25upx;
		color: rgba(34, 34, 34, 1);
	}

	.swipe-contain-item-contain-text {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(83, 83, 83, 1);
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.swipe-contain-item-detail {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(169, 169, 169, 1);
		padding: 15upx 1upx 24upx 8upx;
		border-top: 1px solid #F2F2F2;
		margin-top: 20upx;
		height: 96upx;
	}

	.swiper-tip-contain {
		display: flex;
		justify-content: center;
		margin-top: 35upx;
	}

	.swiper-tip {
		width: 20upx;
		height: 8upx;
		margin-right: 10upx;
		background-color: #D8D8D8;
	}

	.swiper-tip-acitive {
		width: 34upx;
		height: 8upx;
		margin-right: 10upx;
		background-color: #2A7DFA;
	}

	.project-contain {
		margin-top: 56upx;
		overflow: hidden;
	}

	.project-contain-top {
		display: flex;
		justify-content: space-between;
		margin: 0upx 30upx 20upx 30upx;
	}

	.project-contain-top-title {
		font-size: 34upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 800;
		color: rgba(34, 34, 34, 1);
	}

	.project-contain-top-opt {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		vertical-align: middle;
		color: rgba(169, 169, 169, 1);
	}

	.project-contain-top-opt text {
		vertical-align: middle;
	}

	.swipe-contain-item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16upx;
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(169, 169, 169, 1);
	}

	.project-seprate {
		width: 100%;
		height: 12upx;
		background: rgba(245, 245, 245, 1);
	}

	.project-swiper-contain {
		// max-height: 900upx;
		/* margin:0upx 30upx; */
	}

	.empty {
		height: 900upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.activity-swiper-contain {
		// height: 752upx;
	}

	.project-swipe-contain-item {
		// margin: 0upx upx;
		padding: 20upx 30upx ;
		border-bottom: 12upx solid #f5f5f5;
	}

	.project-swipe-contain-item:nth-last-child(1) {
		border-bottom: none;
	}

	.more-click {
		margin: 20upx 30upx;
		height: 88upx;
		color: #2A7DFA;
		background: rgba(248, 248, 248, 1);
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 88upx;
		text-align: center;
	}

	

	.vip_contain {
		width: 80upx;
		height: 26upx;
		background-color: #FFEDBB;
		border-radius: 17upx;
		display: flex;
		align-items: center;
		padding: 4upx 5upx;
		margin-left: 4upx;
		justify-content: center;
	}


	.oneline {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.swipe-contain-item-activity-info {
		display: flex;
		justify-content: space-between;
	}

	.swipe-contain-item-activity-info-num {
		color: #2A7DFA;
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.swipe-contain-item-activity-info-text {
		color: #7B7B7B;
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.swipe-contain-item-activity-info-money {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(222, 90, 2, 1);
	}

	.swipe-contain-item-bottom-com {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(169, 169, 169, 1);
		width: 400upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;

	}

	.two-line {
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
	}

	.selfcolor {
		color: #DE5A02
	}

	.swipe-contain-item-bottom-seen {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4E4E4E;
		display: flex;
		align-items: center;
	}

	.swipe-contain-item-bottom-com>.icon {
		margin-right: 10upx;

	}

	.swipe-contain-item-bottom-seen>.icon {
		/* vertical-align: middle; */
		margin-right: 10upx;
		font-size: 24upx;
		vertical-align: top;
		/* margin-bottom: 4upx; */
		/* margin-top: 4upx; */
	}
</style>
